<template>
	<view class="seal-container">
		<view class="form-section">
			<text class="form-title">用章申请</text>
			
			<view class="form-item">
				<text class="form-label">印章类型</text>
				<picker @change="onSealTypeChange" :value="sealTypeIndex" :range="sealTypes">
					<view class="picker-input">
						<text>{{ sealTypes[sealTypeIndex] }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">用章文件</text>
				<input class="form-input" v-model="documentName" placeholder="请输入文件名称" />
			</view>

			<view class="form-item">
				<text class="form-label">用章数量</text>
				<input class="form-input" type="number" v-model="quantity" placeholder="请输入用章数量" />
			</view>

			<view class="form-item">
				<text class="form-label">用章事由</text>
				<textarea 
					class="form-textarea" 
					v-model="reason" 
					placeholder="请详细说明用章事由"
					maxlength="200"
				></textarea>
			</view>
		</view>

		<view class="submit-section">
			<button class="submit-button" @tap="submitSeal" :disabled="!canSubmit()">
				提交申请
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const sealTypes = ref(['公章', '合同章', '财务章', '法人章'])
const sealTypeIndex = ref(0)
const documentName = ref('')
const quantity = ref('')
const reason = ref('')

const onSealTypeChange = (e) => {
	sealTypeIndex.value = e.detail.value
}

const canSubmit = () => {
	return documentName.value && quantity.value && reason.value.trim()
}

const submitSeal = () => {
	if (!canSubmit()) {
		uni.showToast({
			title: '请完善申请信息',
			icon: 'none'
		})
		return
	}
	
	uni.showLoading({ title: '提交中...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '申请提交成功',
			icon: 'success'
		})
	}, 2000)
}
</script>

<style scoped>
.seal-container {
	padding: 32rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.form-section {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 32rpx;
	display: block;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-label {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.picker-input, .form-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
}

.form-input {
	width: 100%;
}

.picker-arrow {
	color: #999;
	font-size: 32rpx;
}

.form-textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
	line-height: 1.5;
}

.submit-section {
	margin-bottom: 32rpx;
}

.submit-button {
	width: 100%;
	background: #2B5BA1;
	color: white;
	border: none;
	border-radius: 12rpx;
	padding: 32rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.submit-button[disabled] {
	background: #ccc;
}
</style> 